<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/default-2.0.0.min.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/bui-2.0.0.js"></script>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
</head>

<body>
    <div>
        <div id="formwrap">
            <h5>双向联动表单，依赖vue，需要引入vue库</h5>
            <table id="form_table" class="k_form_table">
   
                <tr>
                    <td class="label label20">姓名</td>
                    <td>
                        <input id="userName" name="userName" style="width: 400px;" v-model="userName" placeholder="请输入姓名" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">薪酬</td>
                    <td>
                        <input id="expSalary" name="expSalary" style="width: 400px;" placeholder="仅限数值输入" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">性别:</td>
                    <td>
                        <label class="k_radio_label">
                            <input type="radio" name="sex" value="1" checked="checked"><i class="k_radio_i"></i>男
                        </label>
                        <label class="k_radio_label">
                            <input type="radio" name="sex" value="2"><i class="k_radio_i"></i>女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">爱好:</td>
                    <td>
                        <label class="k_checkbox_label k_checkbox_anim" >
                            <input type="checkbox" name="lovers" value="1"><i class="k_checkbox_i"></i>篮球
                        </label>
                        <label class="k_checkbox_label k_checkbox_anim" >
                            <input type="checkbox" name="lovers" value="2" checked="checked"><i class="k_checkbox_i"></i>跑步
                        </label>
                        <label class="k_checkbox_label k_checkbox_anim" >
                            <input type="checkbox" name="lovers" value="3" checked="checked"><i class="k_checkbox_i"></i>吉他
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">经验</td>
                    <td>
                        <textarea id="express" name="express"  placeholder="请输入最近三年工作经验" style="width: 400px;"></textarea>
                    </td>
                </tr>
             
                <tr>
                    <td class="label label20">原生下拉</td>
                    <td>
                        <select id="sourceSels" name="sourceSels">
                            <option>选项1</option>
                            <option selected="selected">选项2</option>
                            <option>选项3</option>
                        </select>
                    </td>
                </tr>              
  
                
                <tr>
                    <td colspan="2" style="padding-left: 25%;"><button class="k_common_button"><i class="fa fa-ok"></i><span>保存</span></button></td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">

        var depData = [{
            id: 99,
            text: '研发中心',
            children: [{
                id: 1,
                text: '服务器组',
                children: [{
                    id: 11,
                    text: 'java组'
                }, {
                    id: 12,
                    text: 'c#组'
                }]
            }, {
                id: 2,
                text: '前端组',
                children: [{
                    id: 21,
                    text: '设计组'
                }, {
                    id: 22,
                    text: '开发组'
                }]
            }]
        }];

        var skillData = [{
            id: 1,
            text: '服务器编程',
            children: [{
                id: 11,
                text: 'java'
            }, {
                id: 12,
                text: 'c#'
            }]
        }, {
            id: 2,
            text: '前端编程',
            children: [{
                id: 21,
                text: 'html/css'
            }, {
                id: 22,
                text: 'javascript'
            }]
        }];
        var userAddrData = [
            {
                id: "0001",
                selected: true,
                text: "广西"
            }, {
                id: "0002",
                text: "广州"
            }, {
                id: "0003",
                text: "湖南"
            }
        ];
        $B.DomUtils.onDomLoaded(function () {
            var bean = {express:'这是我的经验',userName:'kevin huang'};
            new Vue({
                el:
            });
            console.log(beanJson);
            
        });
    </script>
</body>

</html>